import React, { ReactElement, useState, useEffect } from 'react';
import { View, Text, Image } from 'react-native';
import codePush, { LocalPackage } from 'react-native-code-push';

import styles from './style';
import Log from '../../common/log';
import Notch, { NotchType } from '../../components/Notch';
import Button from '../../components/Button';
import { rightArrow } from '../../constant/resource';
import navigator from '../../util/navigator';
import { APP_VERSION, CHORES_SERVICE_URL, PRIVACY_URL } from '../../constant';
import {
  checkUpdate,
  logoutAlert,
  onPressPasswordSet,
  onPressDownload
} from './actions';
import NavBar from '../../components/NavBar';

interface ItemData {
  title: string;
  subTitle?: string;
  actionDesc?: string;
  action: () => void;
}

export default (): ReactElement => {
  const [version, setVersion] = useState('');

  useEffect((): void => {
    codePush
      .getUpdateMetadata()
      .then((res: LocalPackage | null): void => {
        if (res) {
          if (
            res.label &&
            typeof res.label === 'string' &&
            res.label.length > 0
          ) {
            setVersion(res.label.substr(1));
          }
        }
      })
      .catch((err): void => {
        Log.e('Person', err);
      });
  }, []);

  const ITEMS: ItemData[] = [
    {
      title: '修改密码',
      subTitle: '',
      actionDesc: '',
      action: onPressPasswordSet
    },
    {
      title: '缓存管理',
      subTitle: '',
      actionDesc: '',
      action: onPressDownload
    },
    {
      title: '当前版本',
      subTitle: '',
      actionDesc: '检查更新',
      action: checkUpdate
    },
    {
      title: '用户协议',
      actionDesc: '',
      action: (): void => {
        navigator.push('WebView', {
          title: '用户协议',
          url: CHORES_SERVICE_URL
        });
      }
    },
    {
      title: '隐私政策',
      actionDesc: '',
      action: (): void => {
        navigator.push('WebView', { title: '隐私政策', url: PRIVACY_URL });
      }
    }
  ];

  const Item = ({
    title,
    subTitle,
    actionDesc,
    action
  }: ItemData): ReactElement => (
    <Button style={styles.item} onPress={action}>
      <Text style={styles.itemTitle}>{title}</Text>
      <View style={styles.loadSubTitle}>
        <Text style={styles.subTitleDesc}>{subTitle}</Text>
        {actionDesc ? (
          <Text style={styles.actionDesc}>{actionDesc}</Text>
        ) : null}
        <Image source={rightArrow} style={styles.arrowIcon} />
      </View>
    </Button>
  );

  return (
    <Notch style={styles.container} type={NotchType.Top}>
      <NavBar title="系统设置" />
      <View style={styles.content}>
        {ITEMS.map(
          (item): ReactElement => {
            let subTitle = '';
            if (item.title === '当前版本') {
              subTitle = `v${APP_VERSION}${version && `.${version}`}`;
            }
            return <Item {...item} subTitle={subTitle} />;
          }
        )}
      </View>
      <Button
        style={styles.logout}
        text="退出登录"
        textStyle={styles.logoutDesc}
        onPress={logoutAlert}
      />
    </Notch>
  );
};
